$(function () {
    initCate()
    // 初始化富文本编辑器 这一行一定要在入口函数中写,否则会出bug
    initEditor()

    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)


    $('#uploadBtn').click(function () {
        $('#coverFile').click()
    })

    //change事件点击取消的时候也会触发
    $('#coverFile').change(function (e) {
        console.log(e)
        var files = e.target.files;
        if (files.length == 0) {
            return layer.msg('请选择文件')
        }
        // 根据文件，创建对应的 URL 地址
        var newImgURL = URL.createObjectURL(files[0])
        // 为裁剪区域重新设置图片
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })

    var state = '已发布'
    $('#draftBtn').click(function () {
        state = '草稿'
    })


    $('#form-publish').submit(function (e) {
        e.preventDefault();
        // new FormData(表单对象)
        var fd = new FormData(this);//创建一个formData对象,传入的this是表单对象,这样写可以自动收集所有的表单数据
        fd.append('state', state)
        // fd.forEach(function(value,key){
        //     console.log(value,key)
        // })
        $image
            .cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {
                // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 5. 将文件对象，存储到 fd 中
                fd.append('cover_img', blob)
                // 6. 发起 ajax 数据请求
                // multipart/form-data 
                $.ajax({
                    method:'post',
                    url:'/my/article/add',
                    data:fd,
                    processData:false,//让jq不要对数据进行序列化 key=value&key=value的形式
                    contentType:false,//让jq不要添加头信息application/x-www-form-urlencoded
                    success:function(res){
                        if(res.status != 0){
                            return layer.msg('添加文章失败')
                        }
                        //成功之后跳转到文章列表页
                        location.href = '/article/art_list.html'
                    }
                })
            })
    })



})


function initCate() {
    $.ajax({
        method: 'get',
        url: '/my/article/cates',
        success: function (res) {
            if (res.status != 0) {
                return layer.msg('获取数据失败')
            }
            console.log(res)
            var str = template('cate-tpl', res)
            $('[name=cate_id]').html(str)
            // 对layui插件更新一下数据
            layui.form.render();
        }
    })
}